<template>
	<view style="position:relative">
		<view class="balance">
			<image style="width:64rpx;height:64rpx;" src="../../static/topic/7400.png" mode="" @tap="goBack"></image>
		</view>
		<view style="position:absolute;top:180rpx;margin:30rpx">
			<view style="margin:30rpx 0">
				<text class="tit">别墅中式玄关装修</text>
				<view class="flex" style="align-items: center;margin-top: 14rpx;">
					<image style="width: 48rpx;height: 48rpx;" src="../../static/shield-star.png" mode=""></image>
					<text
						style="font-size: 24rpx;font-weight: 400;color: rgba(30,30,30,0.3);">共厂家具已为此订单购买保险，最高赔付600万</text>
				</view>
			</view>
			<!-- 生产阶段-用户端 -->
			<view class="order" style="margin-bottom:30rpx">
				<h4 style="font-size: 36rpx;line-height: 28rpx;margin: 35rpx 0;">产品已经全部送达，请师傅上门安装</h4>
				<view class="flex space-between" style="margin: 33rpx 0;">
					<text class="title">图纸发送时间</text>
					<view style="font-size: 28rpx;">2023-02-28 08:32:21</view>
				</view>
				<view class="flex" style="justify-content: space-between;margin: 24rpx 0 0 0;">
					<text class="title">订单号</text>
					<view style="font-size: 28rpx;">
						<text>65983652303022811036529</text>
						<text style="color: #167EC1;margin-left: 20rpx;">复制</text>
					</view>
				</view>
				<view class="flex space-between" style="margin: 30rpx 0;">
					<text class="title">创建日期</text>
					<view style="font-size: 28rpx;">2023-02-28 08:32:21</view>
				</view>
				<view class="flex space-between" style="margin: 30rpx 0;">
					<text class="title">支付方式</text>
					<view style="font-size: 28rpx;">银行卡</view>
				</view>
				<view class="flex space-between align-center"
					style="border-top: 1rpx solid rgba(30,30,30,0.3);margin-top: 30rpx;">
					<text class="title">总金额</text>
					<view style="font-family: Rubik-Medium, Rubik;font-size: 44rpx;font-weight: 500;">600.00
					</view>
				</view>
				<view style="border-radius: 20rpx;border: 2rpx solid #FF801F;padding:30rpx;margin:40rpx 0">
					<h2>安装时间</h2>
					<h4 style="font-size: 24rpx;color: #FF801F;">如需更改时间，请与业主联系确认。</h4>
					<view class="flex space-between"
						style="width:100%;font-family: Rubik-Medium, Rubik;margin-top: 30rpx;font-size: 44rpx;font-weight: 500;">
						<text class="title">2023-3-30</text>
						<view>09:30</view>
					</view>
				</view>
			</view>
			<view class="phone flex align-center justify-center">
				<image style="width:64rpx;height: 64rpx;" src="../../static/7980.png" mode=""></image>
				联系业主
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
		},
	}
</script>

<style scoped>
	.space-between {
		justify-content: space-between;
	}
	.phone {
		width: 630rpx;
		height: 100rpx;
		background: #492D22;
		border-radius: 8rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		margin:50rpx auto;
	}

	.balance {
		width: 100%;
		margin: 30rpx;
		align-items: flex-start;
		justify-content: space-between;
		position: absolute;
		top: 100rpx;
	}

	.tit {
		font-size: 44rpx;
		font-weight: 500;
		color: #1E1E1E;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
	}

	.titl {
		font-size: 26rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: #1E1E1E;
	}

	.order {
		width: 690rpx;
		background-color: #fff;
		padding: 30rpx;
		background-image: url('../../static/NoPath.png');
		box-shadow: 0rpx 6rpx 30rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		margin-bottom: 180rpx;
	}
</style>
